<template>
    <div class="common-layout">
        <el-container>
            <!-- 左侧 -->
            <el-aside class="left-container">
                <ContactsSidebar/>
            </el-aside>

            <!-- 右侧 -->
            <el-container class="right-container" v-show="chatStor.state.showAll===true">
                <!-- 消息区域 -->
                <el-main class="main-container">
                    <Messages/>
                </el-main>
                <!-- 输入区域 -->
                <el-footer class="bottom-container">
                    <Input/>
                </el-footer>
            </el-container>

        </el-container>
    </div>
</template>

<script setup lang="ts">
import ContactsSidebar from '@/components/chat/ContactsSidebar.vue';
import Messages from '@/components/chat/Messages.vue';
import Input from '@/components/chat/Input.vue';
import {chatStore} from '@/stores/disk/chat'
import { onMounted ,onBeforeUnmount } from 'vue';
import {connectToNettyServer} from "@/api/disk/websocket"
const chatStor=chatStore()
onMounted(() => {
    //获取联系人列表
    chatStor.getContacts()
    //连接websocket
    const userId = localStorage.getItem('userId');
    const socket= connectToNettyServer(userId,chatStor)
    chatStor.connectSocket(socket)
})
onBeforeUnmount(() => {
    //断开websocket
    const socket = chatStor.state.socket
    socket.close()
    chatStor.connectSocket(null)
})
</script>

<style scoped>
.common-layout{
    display: flex;
}
.left-container{
    flex: none !important;
    height: 570px !important; 
}

.right-container{
  display: flex;
  flex-direction: column;
}
.main-container{
    height: 450px !important; 
    flex: none !important;
    background: #e9e6e6;
    scrollbar-width: none;
    padding: 0 !important; 
}
.bottom-container{
    flex: none !important;
    height: 120px !important;
}
.header{
    background: #ffffff;
    border: 2px solid rgb(255, 255, 255); /* 设置下边框 */
}
</style>